import React, { Component } from 'react';
import 'animate.css'
class Item extends Component {
  state = {
    isActive: false
  }
  render() {
    const { logo, title, id, handleDetele } = this.props
    const { isActive } = this.state
    return (
      <div className={[isActive ? 'active' : '', 'item', 'animate__animated', 'animate__tada'].join(" ")}
        ref={ref => this.wrapper = ref}>
        <b className="close" onClick={() => handleDetele(id)}>X</b>
        <div>
          <img src={logo} alt="" className="logo"
            onDoubleClick={() => this.setState({ isActive: true })}
          />
          <span className="back">编辑</span>
        </div>
        <h3 className="title">{title}</h3>
      </div>
    );
  }
  handleWrapper = (e) => {
    const isActive = this.wrapper.contains(e.target)
    this.setState({
      isActive
    })
  }
  componentDidMount() {
    document.addEventListener('click', this.handleWrapper)
  }
  componentWillUnmount() {
    document.removeEventListener('click', this.handleWrapper)
  }
}

export default Item;
